<template>
	<view class="container">
		<view v-if="scoreType != 1" class="uni-form-item uni-column" style="display: flex; justify-content: space-between; height: 90rpx; align-items: center; font-size: 28rpx; width: 90%; margin: auto">
			<view class="title">优惠券</view>
			<view class="" v-if="selectCoupon.id" @click="selectCouponCall" style="color: #e74032; font-size: 28rpx; font-weight: bold">
				<view v-if="selectCoupon.couponType == 0 || selectCoupon.couponType == 1">
					已享满{{ selectCoupon.plugsCoupons.howMuchFullMoney }}减{{ selectCoupon.plugsCoupons.couponDenomination }}
				</view>
				<view v-if="selectCoupon.couponType == 2">已享减{{ selectCoupon.plugsCoupons.couponDenomination }}积分</view>
				<view v-if="selectCoupon.couponType == 3">已享满{{ selectCoupon.plugsCoupons.howMuchFullMoney }}打{{ selectCoupon.plugsCoupons.couponDenomination * 10 }}折</view>
			</view>
			<view class="" style="display: flex; align-items: center" v-else>
				<view class="" style="margin-right: 14rpx">
					<view class="" style="flex: 1; text-align: right; color: #999999" v-if="couponList.length == 0">暂无优惠券</view>
					<view class="" @click="selectCouponCall" style="flex: 1; text-align: right; color: #e74032; font-size: 24rpx; font-weight: bold" v-if="couponList.length > 0">
						请选择优惠券
					</view>
				</view>
				<u-icon name="arrow-right" color="#939393" size="20"></u-icon>
			</view>
		</view>
		
		
		<view class="" v-if="coupon_show">
			<u-popup :show="coupon_show" :round="10" mode="bottom" @close="closePop">
				<!-- <view class="coupon_main_box">
					<view class="coupon_title">
						<text>选择优惠券</text>
						<u-icon name="close-circle" @click="closePop" size="28"></u-icon>
					</view>
					<scroll-view class="coupon_list_scroll" scroll-y="true">
						<view class="couponBox" v-for="item in couponList" :key="item.id">
							<view class="couponBox-left">
								<view style="width: 100%" v-if="item.plugsCoupons.couponType !== 2">
									<view class="limituse" v-if="item.plugsCoupons.goodsType == 1">全部商品可用</view>
									<view class="limituse" v-if="item.plugsCoupons.goodsType == 2">指定商品可用</view>
								</view>
								<view style="width: 100%" v-if="item.plugsCoupons.couponType == 2">
									<view class="limituse" :style="{background: lightColor1, color: _temp_themeColor}">积分商品可用</view>
								</view>
								<view>
									<view class="couponMoney" v-if="item.couponType == 0">
										<text style="font-size: 28rpx">￥</text>
										{{ item.plugsCoupons.couponDenomination }}
									</view>
									<view class="couponMoney" v-else-if="item.couponType == 2">
										{{ item.plugsCoupons.couponDenomination }}
										<text style="font-size: 28rpx">积分</text>
									</view>
									<view class="couponMoney" v-else-if="item.couponType == 3">
										{{ item.plugsCoupons.couponDenomination * 10 }}
										<text style="font-size: 28rpx">折</text>
									</view>
								</view>
								<view>
									<view class="couponType" v-if="item.plugsCoupons.couponType == 0">满减券</view>
									<view class="couponType" v-else-if="item.plugsCoupons.couponType == 2">积分券</view>
									<view class="couponType" v-else-if="item.plugsCoupons.couponType == 3">折扣券</view>
								</view>
							</view>
							<view class="couponBox-right">
								<view class="couponName">
									<view class="couponName-left">【{{ item.couponName }}】</view>
									<view>
										<view class="couponName-right" v-if="item.couponType == 0">满{{ item.plugsCoupons.howMuchFullMoney }}减{{ item.plugsCoupons.couponDenomination }}</view>
										<view class="couponName-right" v-if="item.couponType == 1">满{{ item.plugsCoupons.howMuchFullMoney }}减{{ item.plugsCoupons.couponDenomination }}</view>
										<view class="couponName-right" v-if="item.couponType == 2">{{ item.plugsCoupons.couponDenomination }}积分</view>
										<view class="couponName-right" v-if="item.couponType == 3">{{ item.plugsCoupons.couponDenomination * 10 }}折</view>
									</view>
								</view>
								<view class="">
									<view class="limitTime" v-if="item.plugsCoupons.timeType == 1">{{ item.plugsCoupons.startTime }}~{{ item.plugsCoupons.endTime }}</view>
									<view class="limitTime" v-else-if="item.plugsCoupons.timeType == 2">领取后{{ item.plugsCoupons.timeDay }}天内有效</view>
								</view>
								<view class="couponExplain">
									<view class="couponExplain-left">有效期内使用</view>
									<view v-if="item.couponType !== 2">
										<view class="couponExplain-right" v-if="original_goods_price >= item.plugsCoupons.howMuchFullMoney" @click="useCoupon(item.couponId)">使用</view>
										<view class="couponExplain-right" style="background-color: #e9ebec; color: #696a6c" v-if="original_goods_price < item.plugsCoupons.howMuchFullMoney" @click="">使用</view>
									</view>
									<view v-if="item.couponType == 2">
										<view class="couponExplain-right" v-if="(original_goods_price >= item.plugsCoupons.howMuchFullMoney) & (scoreType == 1)" @click="useCoupon(item.couponId)">使用</view>
										<view class="couponExplain-right" style="background-color: #e9ebec; color: #696a6c" v-if="original_goods_price < item.plugsCoupons.howMuchFullMoney" @click="">使用</view>
									</view>
									<view v-if="item.couponType == !2 && item.item.plugsCoupons.goodsType == 2">
										<view class="couponExplain-right" v-if="appointMoney >= item.plugsCoupons.howMuchFullMoney" @click="useCoupon(item.couponId)">使用</view>
										<view class="couponExplain-right" style="background-color: #e9ebec; color: #696a6c" v-if="appointMoney < item.plugsCoupons.howMuchFullMoney" @click="">使用</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view> -->
				
				
				<!-- <view class="coupon_main_box">
					<view class="coupon_title">
						<text>选择优惠券</text>
						<u-icon name="close-circle" @click="closePop" size="28"></u-icon>
					</view>
					<scroll-view class="coupon_list_scroll" scroll-y="true">
						<view class="couponBox" v-for="item in couponList" :key="item.id">
							<view class="couponBox-left">
								<view style="width: 100%" v-if="item.plugsCoupons.couponType !== 2">
									<view class="limituse" v-if="item.plugsCoupons.goodsType == 1">全部商品可用</view>
									<view class="limituse" v-if="item.plugsCoupons.goodsType == 2">指定商品可用</view>
								</view>
								<view style="width: 100%" v-if="item.plugsCoupons.couponType == 2">
									<view class="limituse" :style="{background: lightColor1, color: _temp_themeColor}">积分商品可用</view>
								</view>
								<view>
									<view class="couponMoney" v-if="item.couponType == 0">
										<text style="font-size: 28rpx">￥</text>
										{{ item.plugsCoupons.couponDenomination }}
									</view>
									<view class="couponMoney" v-else-if="item.couponType == 2">
										{{ item.plugsCoupons.couponDenomination }}
										<text style="font-size: 28rpx">积分</text>
									</view>
									<view class="couponMoney" v-else-if="item.couponType == 3">
										{{ item.plugsCoupons.couponDenomination * 10 }}
										<text style="font-size: 28rpx">折</text>
									</view>
								</view>
								<view>
									<view class="couponType" v-if="item.plugsCoupons.couponType == 0">满减券</view>
									<view class="couponType" v-else-if="item.plugsCoupons.couponType == 2">积分券</view>
									<view class="couponType" v-else-if="item.plugsCoupons.couponType == 3">折扣券</view>
								</view>
							</view>
							<view class="couponBox-right">
								<view class="couponName">
									<view class="couponName-left">【{{ item.couponName }}】</view>
									<view>
										<view class="couponName-right" v-if="item.couponType == 0">满{{ item.plugsCoupons.howMuchFullMoney }}减{{ item.plugsCoupons.couponDenomination }}</view>
										<view class="couponName-right" v-if="item.couponType == 1">满{{ item.plugsCoupons.howMuchFullMoney }}减{{ item.plugsCoupons.couponDenomination }}</view>
										<view class="couponName-right" v-if="item.couponType == 2">{{ item.plugsCoupons.couponDenomination }}积分</view>
										<view class="couponName-right" v-if="item.couponType == 3">{{ item.plugsCoupons.couponDenomination * 10 }}折</view>
									</view>
								</view>
								<view class="">
									<view class="limitTime" v-if="item.plugsCoupons.timeType == 1">{{ item.plugsCoupons.startTime }}~{{ item.plugsCoupons.endTime }}</view>
									<view class="limitTime" v-else-if="item.plugsCoupons.timeType == 2">领取后{{ item.plugsCoupons.timeDay }}天内有效</view>
								</view>
								<view class="couponExplain">
									<view class="couponExplain-left">有效期内使用</view>
									<view v-if="item.couponType !== 2">
										<view class="couponExplain-right" v-if="original_goods_price >= item.plugsCoupons.howMuchFullMoney" @click="useCoupon(item.couponId)">使用</view>
										<view class="couponExplain-right" style="background-color: #e9ebec; color: #696a6c" v-if="original_goods_price < item.plugsCoupons.howMuchFullMoney" @click="">使用</view>
									</view>
									<view v-if="item.couponType == 2">
										<view class="couponExplain-right" v-if="(original_goods_price >= item.plugsCoupons.howMuchFullMoney) & (scoreType == 1)" @click="useCoupon(item.couponId)">使用</view>
										<view class="couponExplain-right" style="background-color: #e9ebec; color: #696a6c" v-if="original_goods_price < item.plugsCoupons.howMuchFullMoney" @click="">使用</view>
									</view>
									<view v-if="item.couponType == !2 && item.item.plugsCoupons.goodsType == 2">
										<view class="couponExplain-right" v-if="appointMoney >= item.plugsCoupons.howMuchFullMoney" @click="useCoupon(item.couponId)">使用</view>
										<view class="couponExplain-right" style="background-color: #e9ebec; color: #696a6c" v-if="appointMoney < item.plugsCoupons.howMuchFullMoney" @click="">使用</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view> -->
				
				
				
				<view class="mask-content">
					<view class="coupon_title">
						<text>选择优惠券</text>
						<u-icon name="close-circle" @click="closePop" size="28"></u-icon>
					</view>
					<scroll-view class="coupon_list_scroll" scroll-y="true">
						<view class="coupon-item" v-for="(item, index) in couponList" :key="index">
							<view class="" v-if="item.couponType != 2">
								<view class="" v-if="item.plugsCoupons.goodsType==1">
									<view class="con">
										<view class="left">
											<text class="title">{{ item.couponName }}</text>
											<text class="time" v-if="item.plugsCoupons.goodsType == 1">全部商品可用</text>
											<text class="time" v-if="item.plugsCoupons.goodsType == 2">指定商品可用</text>
										</view>
										<view class="right">
											<text class="price" v-if="item.couponType == 0 || item.couponType == 1">
												￥{{ item.plugsCoupons.couponDenomination }}
											</text>
											<text class="price" v-if="item.couponType == 2">
												{{ item.plugsCoupons.couponDenomination }}分
											</text>
											<text class="price" v-if="item.couponType == 3">
												{{ item.plugsCoupons.couponDenomination * 10 }}折
											</text>
											<text v-if="item.couponType == 0 || item.couponType == 1 || item.couponType == 3">
												满{{ item.plugsCoupons.howMuchFullMoney }}可用
											</text>
											<!-- <text class="price">{{item.plugsCoupons.couponDenomination}}</text>
											<text>满{{item.plugsCoupons.howMuchFullMoney}}可用</text> -->
										</view>
									
										<view class="circle l"></view>
										<view class="circle r"></view>
									</view>
									<view class="getlin" style="">
										<text class="tips" v-if="item.plugsCoupons.timeType == 1">
											{{ item.plugsCoupons.startTime }}--{{ item.plugsCoupons.endTime }}
										</text>
										<text class="tips" v-if="item.plugsCoupons.timeType == 2">
											有效期至领取内{{ item.plugsCoupons.timeDay }}天内有效
										</text>
										<view
											style=""
											v-if="filterCoupon(item)==1"
											@click="useCoupon(item, index)"
										>
											<view class="linqu" v-if="!item.checked">使用</view>
											<view class="linqu" v-if="item.checked" style="background-color: #f9ae3d">取消</view>
										</view>
										<view class="linqu" style="background-color: #999" v-else>不可用</view>
										
										
									
									</view>
								</view>
								<!-- 单品优惠 -->
								<view class="" v-if="item.plugsCoupons.goodsType==2">
									<view class="con">
										<view class="left">
											<text class="title">{{ item.couponName }}</text>
											<text class="time" v-if="item.plugsCoupons.goodsType == 1">全部商品可用</text>
											<text class="time" v-if="item.plugsCoupons.goodsType == 2">指定商品可用</text>
										</view>
										<view class="right">
											<text class="price" v-if="item.couponType == 0 || item.couponType == 1">
												￥{{ item.plugsCoupons.couponDenomination }}
											</text>
											<text class="price" v-if="item.couponType == 2">
												{{ item.plugsCoupons.couponDenomination }}分
											</text>
											<text class="price" v-if="item.couponType == 3">
												{{ item.plugsCoupons.couponDenomination * 10 }}折
											</text>
											<text v-if="item.couponType == 0 || item.couponType == 1 || item.couponType == 3">
												满{{ item.plugsCoupons.howMuchFullMoney }}可用
											</text>
											<!-- <text class="price">{{item.plugsCoupons.couponDenomination}}</text>
											<text>满{{item.plugsCoupons.howMuchFullMoney}}可用</text> -->
										</view>
									
										<view class="circle l"></view>
										<view class="circle r"></view>
									</view>
									<view class="getlin" style="">
										<text class="tips" v-if="item.plugsCoupons.timeType == 1">
											{{ item.plugsCoupons.startTime }}--{{ item.plugsCoupons.endTime }}
										</text>
										<text class="tips" v-if="item.plugsCoupons.timeType == 2">
											有效期至领取内{{ item.plugsCoupons.timeDay }}天内有效
										</text>
										<view
											style=""
											v-if="filterCoupon(item)==1"
											@click="useCoupon(item, index)"
										>
											<view class="linqu" v-if="!item.checked">使用</view>
											<view class="linqu" v-if="item.checked" style="background-color: #f9ae3d">取消</view>
										</view>
										<view class="linqu" style="background-color: #999" v-else>不可用</view>
										
										
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
	
</template>

<script>
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	export default {
		props: {
			couponList: {
				type: Array,
				default: []
			},
			scoreType: {
				type: Number,
				default: 0
			}
		},
		data () {
			return {
				coupon_show: false,
				appointMoney: 0,
				useCouponId: '',
				selectCoupon: {},
				distributionFee: 0,
			}
		},
		computed: {
			...mapState('pay_store',['firm_rate', 'original_goods_price', 'firm_reduced_price', 'final_goods_price', 'shop_cart_list']),
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.7);
				return light_color;
			},
			lightColor1 () {
				let light_color = makeLightColor(this._temp_themeColor, 0.9);
				return light_color;
			},
			filterCoupon () {
				return (couponItem) => {
					// 单商品
					if (couponItem.plugsCoupons.goodsType == 2) {
						let avaliableGoodsList = this.shop_cart_list.filter((goodsItem) =>{
							let ids = couponItem.plugsCoupons.goodsIds;
							let goodsId = goodsItem.goodsId;
							return ids.includes(goodsItem.goodsId + '');
						})
						let totalMoney = 0;
						console.log(avaliableGoodsList, 'avaliableGoodsList')
						avaliableGoodsList.forEach((item) =>{
							if (item.goodsSpecification.length > 0) {
								totalMoney += item.goodsSpecification[0].dealPrice * item.goodsNum;
							} else {
								totalMoney += item.plugsGoods.goodsPrice * item.goodsNum;
							}
						})
						if(totalMoney * this.firm_rate >= couponItem.plugsCoupons.howMuchFullMoney){
								return 1
						}else{
							return 0
						}
						// 多商品
					} else if (couponItem.plugsCoupons.goodsType == 1) {
						if(this.original_goods_price * this.firm_rate >= couponItem.plugsCoupons.howMuchFullMoney){
							return 1
						}else{
							return 0
						}
					}
					
				}
			}
		},
		mounted () {
			
		},
		methods: {
			...mapMutations('pay_store', ['SET_COUPON_DISCOUNT', 'SET_CURRENT_COUPON']),
			selectCouponCall () {
				this.coupon_show = true;
			},
			closePop () {
				this.coupon_show = false;
				this.$emit('close');
			},
			// 筛选与优惠券匹配的商品
			// filterCoupon () {
			// 	// 部分商品优惠券
			// 	let totalGoodsIdsArr = []; // 优惠券里包含的所有商品ids
			// 	this.couponList.forEach((item) => {
			// 		if (item.plugsCoupons.goodsType == 2) {
			// 			let goodsIdsArr = item.plugsCoupons.goodsIds.split(',');
			// 			goodsIdsArr.forEach((id) => {
			// 				totalGoodsIdsArr.push(id);
			// 			})
			// 		}
			// 	})
			// 	let goodsIds = totalGoodsIdsArr.join();
			// 	let avliableGoods = this.shop_cart_list.filter((item) => goodsIds.includes(item.goodsId));
			// 	let susMoney = 0;
			// 	avliableGoods.forEach((item) => {
			// 		if (item.goodsSpecification.length) {
			// 			susMoney += item.goodsSpecification[0].dealPrice * this.firm_rate * item.goodsNum;
			// 		} else {
			// 			susMoney += item.plugsGoods.goodsPrice * this.firm_rate * item.goodsNum;
			// 		}
			// 	});
			// 	this.appointMoney = Math.round(susMoney * 100) / 100;
			// },
			// 使用优惠券
			// goodsType = 1 ：全部商品
			// goodsType = 2 ：部分商品
			// useCoupon(id) {
			// 	let self = this;
			// 	let ids = id;
			// 	let list = self.couponList;
			// 	self.useCouponId = id;
			// 	let selCoupon = list.filter((item) => item.couponId == ids);
			// 	self.selectCoupon = selCoupon[0];
			// 	let goodstype = self.selectCoupon.plugsCoupons.goodsType;
			// 	this.SET_CURRENT_COUPON(selCoupon[0]);
			// 	if (goodstype == 1) {
			// 		if (selCoupon[0].couponType == 0 || selCoupon[0].couponType == 2 || selCoupon[0].couponType == 1) {
			// 			let num = self.original_goods_price - selCoupon[0].plugsCoupons.couponDenomination;
			// 			num = Math.round(num * 100) / 100;
			// 			this.SET_COUPON_DISCOUNT(num);
			// 		} else if (selCoupon[0].couponType == 3) {
			// 			let num2 = self.original_goods_price * selCoupon[0].plugsCoupons.couponDenomination;
			// 			num2 = Math.round(num2 * 100) / 100;
			// 			this.SET_COUPON_DISCOUNT(num2);
			// 		}
			// 	} else {
			// 		if (selCoupon[0].couponType == 0) {
			// 			// 订单原价减去可享受优惠券的商品原总价，得到不能优惠的原价，加上打折后的价格就是总价。
			// 			let money1 = self.original_goods_price - self.appointMoney;
			// 			let money2 = self.appointMoney - selCoupon[0].plugsCoupons.couponDenomination;
			// 			this.SET_COUPON_DISCOUNT(Number(money1) + Number(money2));
			// 		} else if (selCoupon[0].couponType == 3) {
			// 			let money1 = self.original_goods_price - self.appointMoney;
			// 			let money2 = self.appointMoney * selCoupon[0].plugsCoupons.couponDenomination;
						
			// 			this.SET_COUPON_DISCOUNT(Number(money1) + Number(money2));
			// 		}
			// 	}
			// 	this.closePop();
			// },
			
			useCoupon(item, index) {
				if (!item.checked) {
					this.couponList.forEach((item) => {
						item.checked = false;
					});
					this.selectCoupon = item;
					this.SET_CURRENT_COUPON(item);
					this.maskState = 0;
					if (this.selectCoupon.couponType == 0 || this.selectCoupon.couponType == 1) {
						let zongPrice = Number(
							this.firm_reduced_price + this.distributionFee - this.selectCoupon.plugsCoupons.couponDenomination
						).toFixed(2);
						this.SET_COUPON_DISCOUNT(zongPrice);
					} else if (this.selectCoupon.couponType == 3) {
						let zongPrice = Number(
							this.firm_reduced_price * this.selectCoupon.plugsCoupons.couponDenomination
						).toFixed(2);
						this.SET_COUPON_DISCOUNT(zongPrice);
					}
					item.checked = !item.checked;
				} else {
					this.selectCoupon = {};
					this.SET_CURRENT_COUPON({});
					this.maskState = 0;
					let zongPrice = Number(this.firm_reduced_price - 0).toFixed(2);
					this.SET_COUPON_DISCOUNT(zongPrice);
					this.couponList.forEach((item) => {
						item.checked = false;
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// .coupon_main_box{
	// 	padding: 20rpx 28rpx;
	// 	box-sizing: border-box;
		
	// 	.coupon_title{
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		width: 96%;
	// 		margin: 20rpx auto;
	// 	}
	// 	.coupon_list_scroll{
	// 		width: 100%;
	// 		max-height: 600rpx;
				
	// 		.couponBox {
	// 			width: 94%;
	// 			margin: auto;
	// 			margin-bottom: 12rpx;
	// 			display: flex;
	// 			border: 3rpx solid #e6b4b6;
	// 			border-radius: 20rpx;
	// 			overflow: hidden;
			
	// 			.couponBox-left {
	// 				width: 180rpx;
	// 				height: 100%;
	// 				display: flex;
	// 				flex-direction: column;
	// 				justify-content: space-between;
	// 				align-items: center;
	// 				box-sizing: border-box;
	// 				padding-bottom: 20rpx;
	// 				border-right: 3rpx solid #f5f5f5;
			
	// 				.limituse {
	// 					width: 100%;
	// 					text-align: center;
	// 					padding: 6rpx 0;
	// 					font-size: 24rpx;
	// 					background-color: #faa7a4;
	// 					color: #ea2135;
	// 				}
			
	// 				.couponMoney {
	// 					color: #ea2135;
	// 					font-weight: 600;
	// 					font-size: 42rpx;
	// 				}
	// 			}
			
	// 			.couponBox-right {
	// 				display: flex;
	// 				flex: 1;
	// 				flex-direction: column;
	// 				justify-content: space-around;
	// 				padding: 16rpx 26rpx;
	// 				box-sizing: border-box;
			
	// 				.couponName {
	// 					display: flex;
	// 					font-weight: bold;
	// 				}
			
	// 				.limitTime {
	// 					font-size: 24rpx;
	// 					color: #aaa;
	// 				}
			
	// 				.couponExplain {
	// 					display: flex;
	// 					justify-content: space-between;
	// 					align-items: center;
			
	// 					.couponExplain-right {
	// 						width: 160rpx;
	// 						height: 60rpx;
	// 						border-radius: 40rpx;
	// 						text-align: center;
	// 						line-height: 60rpx;
	// 						background-color: #fad8d8;
	// 						color: #d8696f;
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// }
	
	
	
	.mask-content{
		padding: 20rpx 28rpx;
		box-sizing: border-box;
		background: #f3f3f3;
		
		.coupon_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 96%;
			margin: 20rpx auto;
		}
		.coupon_list_scroll{
			width: 100%;
			max-height: 600rpx;
			
			.coupon-item {
				display: flex;
				flex-direction: column;
				margin: 20rpx 0;
				background: #fff;
			
				.con {
					display: flex;
					align-items: center;
					position: relative;
					height: 120rpx;
					padding: 0 30rpx;
			
					&:after {
						position: absolute;
						left: 0;
						bottom: 0;
						content: '';
						width: 100%;
						height: 0;
						border-bottom: 1px dashed #f3f3f3;
						transform: scaleY(50%);
					}
				}
			
				.left {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					overflow: hidden;
					height: 100rpx;
				}
			
				.title {
					font-size: 32rpx;
					color: #303133;
					margin-bottom: 10rpx;
				}
			
				.time {
					font-size: 24rpx;
					color: #909399;
				}
			
				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #606266;
					height: 100rpx;
				}
			
				.price {
					font-size: 44rpx;
					color: #ff633d;
			
					&:before {
						font-size: 34rpx;
					}
				}
			
				.getlin {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
			
					.tips {
						font-size: 24rpx;
						color: #999;
						line-height: 60rpx;
					}
			
					.linqu {
						font-size: 26rpx;
						color: #fff;
						background-color: orangered;
						width: 100rpx;
						height: 40rpx;
						border-radius: 20rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			
				.circle {
					position: absolute;
					left: -6rpx;
					bottom: -10rpx;
					z-index: 10;
					width: 20rpx;
					height: 20rpx;
					background: #f3f3f3;
					border-radius: 100px;
			
					&.r {
						left: auto;
						right: -6rpx;
					}
				}
			}
		}
	}
	
	
</style>